import BarGrid from "@/components/bar/BarGrid";
import BarList from "@/components/bar/BarList";
import SearchBar from "@/components/common/SearchBar";
import NavBar from "@/components/menus/NavBar";
import { View, Text } from "@tarojs/components";
import { useLoad } from "@tarojs/taro";
import { Cell, List, Loading } from "@taroify/core";
import { useState } from "react";
import BarArticleCard from "@/components/bar/BarArticleCard";

export default function Index() {
  useLoad(() => {
    console.log("Page loaded.");
  });
  const [hasMore, setHasMore] = useState(true);
  const [list, setList] = useState<string[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(false);

  return (
    <NavBar spread={false} title={<SearchBar placeholder="今日" />}>
      <View className="p-3 flex flex-col gap-4">
        <BarList title="我的足迹" />
        <BarGrid />
        <List
          loading={loading}
          hasMore={hasMore}
          onLoad={() => {
            setLoading(true);
            setTimeout(() => {
              for (let i = 0; i < 10; i++) {
                const text = list.length + 1;
                list.push(text < 10 ? "0" + text : String(text));
              }
              const newList = [...list];

              setHasMore(!(newList.length <= 10 || newList.length >= 40));
              setError(newList.length <= 10);
              setList(newList);
              setLoading(false);
            }, 1000);
          }}
        >
          <View className="flex justify-between gap-3">
            <View className="flex-1 flex flex-col gap-3">
              <View className="h-32 bg-red-500"></View>
              {list.slice(0, Math.floor(list.length / 2)).map((item, i) => (
                <BarArticleCard key={i} />
              ))}
            </View>
            <View className="flex-1 flex flex-col gap-3">
              {list
                .slice(Math.floor(list.length / 2), list.length)
                .map((item, i) => (
                  <BarArticleCard key={i} />
                ))}
            </View>
          </View>
          <List.Placeholder
            onClick={() => {
              if (error) {
                setHasMore(true);
                setError(false);
              }
            }}
          >
            {loading && <Loading>加载中...</Loading>}
            {error && "请求失败，点击重新加载"}
            {!error && !hasMore && "没有更多了"}
          </List.Placeholder>
        </List>
      </View>
    </NavBar>
  );
}
